<template>
  <el-dialog :title="title" width="600px" center :visible.sync="dialogFormVisible" :before-close="handleClose">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="130px" label-position="top">
      <el-form-item label="昵称" prop="nickname" v-if="show_bank">
        <el-input class="email_inp" v-model="form.nickname"  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="工作邮箱" prop="email_work">
        <el-input class="email_inp" v-model="form.email_work"  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="银行卡" prop="bank_card" v-if="show_bank">
        <el-input class="email_inp" v-model="form.bank_card"  autocomplete="off" :disabled="!can_operate"></el-input>
      </el-form-item>
      <el-form-item label="开户行" prop="register_bank" v-if="show_bank">
        <el-input class="email_inp" v-model="form.register_bank"  autocomplete="off" :disabled="!can_operate"></el-input>
      </el-form-item>
      <el-form-item  prop="alipay_num" v-if="show_bank" >
        <template slot='label'>
          <span>支付宝账号</span>
          <el-popover
            placement="right"
            title="支付宝账号"
            width="200"
            content="支付宝账号户名必须与您的姓名一致，否则无法正常结算."
            trigger="hover">
            <i class='el-icon-info orange ml10' slot="reference"></i>
          </el-popover>
        </template>
        <el-input class="email_inp" v-model="form.alipay_num"  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-no-more-click:3000 @click="handleClose">返回</el-button>
      <el-button v-no-more-click:3000 type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getUserInfo, updateUser, getMyInfo } from "~/api/user";
import aes from "~/util/aes.js";
export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      if (value === "" || value == undefined || value == null) {
        callback(new Error("请输入邮箱"));
      } else {
        if (
          !/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/.test(
            value
          )
        ) {
          callback(new Error("请输入有效邮箱"));
        } else {
          callback();
        }
      }
    };
    var checkBank = (rule, value, callback) => {
      if (value != '') {
        if (!(/^[0-9]{16,19}$/.test(value))) {
          callback(new Error("请输入正确的银行卡号"));
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var alipayNum = (rule, value, callback) => {
      if (value != '' && value) {
        if (/^1[3456789]\d{9}$/.test(value) || /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/.test(value)) {
          callback()
        } else {
          callback(new Error("请输入正确的支付宝账号"));
        }
      } else {
        callback()
      }
    }
    var nickname = (rule, value, callback) => {
      if (value == '') {
        callback()
      } else {
        callback()
      }
    };
    return {
      dialogFormVisible: false,
      title: "修改资料",
      form: {
        email_work: '',
        bank_card: '',
        register_bank: '',
        alipay_num: '',
        nickname: ''
      },
      rules: {
        email_work: [{ required: true, validator: checkEmail, trigger: "blur" }],
        bank_card: [{ required: false, validator: checkBank, trigger: "blur" }],
        alipay_num: [{ required: false, validator: alipayNum, trigger: "blur" }],
        nickname: [{ required: false, validator: nickname, trigger: "blur" }],
      },
      show_bank: false,
      can_operate: false
    };
  },
  methods: {

    async getMyinfo () {
      let myInfo = await getMyInfo(this.$axios);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data);
      }
    },
    showDialog() {
      this.dialogFormVisible = true;
      this.form.user = this.$store.state.user.id; //用户ID
      this.form.email_work = this.$store.state.user.email_work;
      if (this.$store.state.user.role_id == 2) {
        this.show_bank = true
        this.can_operate = this.$store.state.user.is_update_bank_info
        this.form.bank_card = this.$store.state.user.bank_card
        this.form.register_bank = this.$store.state.user.register_bank
        this.form.alipay_num = this.$store.state.user.alipay_num
        console.log(this.$store.state.user.nickname)
        this.form.nickname = this.$store.state.user.nickname
      }
    },
    submitForm(formName) {

      this.$refs[formName].validate(valid => {
        if (valid) {
          var obj = {
            email_work: this.form.email_work
          };
          if (this.form.bank_card && this.form.bank_card != this.$store.state.user.bank_card) {
            obj.bank_card = this.form.bank_card
          }
          if (this.form.register_bank && this.form.register_bank != this.$store.state.user.register_bank) {
            obj.register_bank = this.form.register_bank
          }
          if (this.form.alipay_num && this.form.alipay_num != this.$store.state.user.alipay_num) {
            obj.alipay_num = this.form.alipay_num
          }
          if (this.form.nickname != '' && this.form.nickname != this.$store.state.user.nickname) {
            obj.nickname = this.form.nickname
          }
          updateUser(this.$axios, obj)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                this.getMyinfo()
                // //将新邮箱存入cookie
                // let userObj = this.$store.state.user;
                // userObj.email_work = this.form.email_work;

                // //修改后先清空cookie
                // this.$store.commit("delUser");
                // this.$cookies.remove("user");

                // this.$cookies.set("user", aes.Encrypt(JSON.stringify(userObj)));
                // this.$store.commit("setUser", userObj);


                this.dialogFormVisible = false;
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
              }
            })
            .catch(err => {
              this.$message({
                message: err,
                type: "error"
              });
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },

    handleClose() {
      this.resetForm("ruleForm");
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style>

</style>
